<template>
  <!-- 如果 mode 为 'disable'，始终显示但根据权限禁用 -->
  <div v-if="mode === 'disable'">
    <slot :disabled="!hasPermission"></slot>
  </div>
  <!-- 如果 mode 为 'hide'（默认），没有权限时隐藏 -->
  <div v-else-if="hasPermission">
    <slot></slot>
  </div>
</template>

<script>
import { hasButtonPermission, hasModuleButtonPermission } from '@/utils/buttonPermission';

export default {
  name: 'ButtonPermission',
  props: {
    // 按钮标识，如 'student:add'
    code: {
      type: String,
      default: ''
    },
    // 模块名称，如 'student'
    module: {
      type: String,
      default: ''
    },
    // 操作类型，如 'add', 'edit', 'delete'
    action: {
      type: String,
      default: ''
    },
    // 父菜单路径（可选）
    parentMenuPath: {
      type: String,
      default: null
    },
    // 控制模式：'hide' - 没有权限时隐藏（默认），'disable' - 没有权限时显示但禁用
    mode: {
      type: String,
      default: 'hide',
      validator: (value) => ['hide', 'disable'].includes(value)
    }
  },
  computed: {
    hasPermission() {
      // 如果提供了完整的按钮标识
      if (this.code) {
        return hasButtonPermission(this.code, this.parentMenuPath);
      }
      
      // 如果提供了模块和操作
      if (this.module && this.action) {
        return hasModuleButtonPermission(this.module, this.action);
      }
      
      // 默认返回 false
      return false;
    }
  }
};
</script>

